<template>
    <div class="good" @click='goodFunc(userId,postContent,postId,className)'>
        <i class="iconfont icon-dianzan" :style="{color:`${iconColor}`}"></i>
        <p :style="{color:`${iconColor}`}">{{likeNum}}</p>
    </div>
</template>

<script>
import axios from 'axios'
import jwtDecode from 'jwt-decode' 
import { Toast } from 'vant';
export default {
    name:'Like', 
    data() {
        return {
            iconColor:'black', 
            decode:null,
            likeNum:null,
            login:null  
        }
    },
    props:['like','postId','className','postContent','userId',],
    mounted(){
        if(sessionStorage.length === 0){
            this.login = false
        }else{
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
            this.login = true
        }
        this.likeNum = this.like
    },
    watch:{
        like(newValue,old){
            this.likeNum = newValue
        }
    },
    methods: {
        //userId是收到人的id，bodyMessage是帖子的内容
        goodFunc(userId,bodyMessage,postId,className){
            //判断有没有登录
            if(this.login){
                let that = this
                async function test(){
                    //点赞
                    let likeParam = new URLSearchParams()
                    likeParam.append('bodyId',postId)
                    likeParam.append('type',className)
                    likeParam.append('userId',String(that.decode.userId))//这个是点赞人的id,是个字符串
                    let data = await axios({
                        method:"post",
                        url:'/praise/add',
                        data:likeParam,
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    })
                    if(data.data.code === 20000){
                        console.log('点赞成功')//成功
                        console.log(that.decode)
                        that.iconColor = getComputedStyle(document.documentElement).getPropertyValue('--themeColor')
                        that.likeNum += 1
                        //给服务器发送消息
                        let sendParam = new URLSearchParams()
                        sendParam.append('bodyMessage',bodyMessage)//这个是帖子的信息
                        sendParam.append('content',`${that.decode.nickname} 点赞了你的帖子`)
                        sendParam.append('form',String(that.decode.userId))
                        sendParam.append('classes',String(0))
                        sendParam.append('to',String(userId))
                        sendParam.append('username',that.decode.nickname)
                        axios({
                            method:'post',
                            url:'/body/sendMessage',
                            data:sendParam,
                            headers:{
                                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                            }
                        }).then(data=>{
                            if(data.data.code === 20000){
                                console.log('发送成功')
                            }
                        }).catch(err=>{
                            console.log(err)
                        })
                    }else{
                        
                        that.iconColor = 'black'
                        that.likeNum -= 1
                        //点赞失败，就要取消点赞
                        axios({
                            url:'/praise/delete',
                            method:'delete',
                            params:{
                                bodyId:postId,
                                type:className,
                                userId:String(that.decode.userId)//这个也是点赞人的id，是个字符串
                            },
                            headers:{
                                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                            }
                        }).then(data=>{
                            console.log('取消点赞')
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    
                    
                }
                test()
            }else{
                Toast('请先登录或注册')
            }
        }
    },
}
</script>

<style lang="less">
    .good{
        display: inline-flex;
        align-items: center;
        i{
            margin-right: 0.1rem;
            color: #4b4b4b;
        }
    }
</style>